<template>
    <div>
        <el-card class="mb-16px">
            <filterComponent v-model:filter-data="rechargeFilterData" showExport @doSearch="handleSearch"
                             @export="exportrecharge"/>
        </el-card>
        <el-card>
            <tableComponent class="set-height" theme="light" :table-header="tableRechargeHeader"
                            :table-data="rechargetableData" v-model:page-info="rechargePageInfo"
                            @pageChange="handleRechargePageChange">
                <template #status>
                    <el-table-column prop="status" label="状态" width="150">
                        <template #default="scope">
                            <span class="font-500 text-#9497b1" v-if="scope.row.status === 0">未审核</span>
                            <span class="font-500 text-#202536" v-else-if="scope.row.status === 1">已审核</span>
                            <span class="font-500 text-#e05f42" v-else-if="scope.row.status === 2">已驳回</span>
                            <span class="font-500 text-#3e5ff5" v-else-if="scope.row.status === 3">已提现</span>
                            <span class="font-500 text-#3db86d" v-else-if="scope.row.status === 4">已转出</span>
                            <span class="font-500 text-#ffa814" v-else>已转入</span>
                        </template>
                    </el-table-column>
                </template>
                <template #voucherUrl>
                    <el-table-column label="图片" prop="voucherUrl" width="120">
                        <template #default="scope">
                            <span v-if="!scope.row.voucherUrl || (scope.row.voucherUrl.search('http')===-1)">--</span>
                            <div v-else>
                                <bigPicture text="点击查看" :imageUrl="scope.row.voucherUrl"/>
                            </div>
                        </template>
                    </el-table-column>
                </template>
                <template #remark>
                    <el-table-column prop="remark" label="备注" width="150" align="center">
                        <template #default="scope">
                            <div class="flex items-center justify-center">
                                <el-tooltip class="box-item" effect="dark" :content="scope.row.remark ?? '--'"
                                            placement="bottom">
                                    <div
                                        class="mr-5px w-100px overflow-hidden text-ellipsis whitespace-nowrap text-center">
                                        {{ scope.row.remark ?? '--' }}
                                    </div>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-table-column>
                </template>
                <template #salesScenario>
                    <el-table-column prop="salesScenario" label="类型" width="100">
                        <template #default="scope">
                            <span v-if="scope.row.salesScenario === 0">首签</span>
                            <span v-else>续费</span>
                        </template>
                    </el-table-column>
                </template>
                <template #operate>
                    <el-table-column width="200" label="操作" fixed="right">
                        <template #default="scope">
                            <el-button link class="text-#0256ff" type="danger" v-if="scope.row.status === 0"
                                       @click="auditbtn(scope.row)">付款审核
                            </el-button>
                            <el-button link type="primary" class="text-#0256ff" @click="handleClick(scope.row)">查看详情
                            </el-button>
                        </template>
                    </el-table-column>
                </template>
            </tableComponent>
        </el-card>
        <dialogBulletRechargeAudit v-model:show="showBulletAuditDia" :item-detail="itemDetail"
                                   @success="getclientrecharge">
        </dialogBulletRechargeAudit>
    </div>
</template>

<script setup lang="ts">
import {ref, watch} from 'vue'
import {useRoute, useRouter} from 'vue-router'

const router = useRouter()
import dialogBulletRechargeAudit from './dialog-bullet-recharge-audit.vue'
import bigPicture from '@/components/bigPicture/index.vue'
import tableComponent from '@/components/tableComponent/index.vue'
import filterComponent from '@/components/filterComponent/index.vue'
import {exportrechargeapi, getclientrechargeapi} from '@/api/api'
import baseurl from '@/api/env'

const props = defineProps({
    type: {
        type: Number,
        default: 0
    }
})

const itemDetail = ref({})
const showBulletAuditDia = ref(false)
const rechargetableData = ref<any>([])

const tableRechargeHeader = ref([
    {
        label: '客户名',
        prop: 'companyName',
        width: 300,
        fixed: 'left'
    },
    {
        label: '产品',
        prop: 'productType',
        width: 150,
        map: {
            0: '子弹发薪',
            1: '电子签',
            2: '日日保',
            3: '长期保',
            6: '团意日保',
            7: '群发消息',
        }
    },
    {
        label: '状态',
        prop: 'status',
        width: 150,
    },
    {
        label: '充值金额',
        prop: 'payMoney',
        width: 150
    },
    {
        label: '充值时间',
        prop: 'createTime',
        width: 200
    },
    {
        label: '充值凭证',
        prop: 'voucherUrl',
        width: 150
    },
    {
        label: '收款账户',
        prop: 'bankName',
        width: 300
    },
    {
        label: '充值方式',
        prop: 'payMode',
        width: 150,
        map: {
            1: '公对公',
            2: '扫码',
            3: '私对公',
            4: '赠送',
        }

    },
    {
        label: '备注',
        prop: 'remark',
        width: 300
    },
    {
        label: '类型',
        prop: 'salesScenario',
        width: 150
    },
    {
        label: '操作',
        prop: 'operate'
    }
])

const rechargeFilterData = ref({
    list: {
        companyName: {
            width: 200,
            name: '客户名称',
            prop: 'companyName',
            value: '',
            placeholder: '请输入客户名称',
            type: 'input',
        },
        status: {
            name: '审核状态',
            prop: 'status',
            value: '',
            placeholder: '全部',
            type: 'select',
            options: [
                {
                    value: '0',
                    label: '待审核'
                },
                {
                    value: '1',
                    label: '已通过'
                },
                {
                    value: '2',
                    label: '已驳回'
                },
            ],
        },
        payMode: {
            name: '充值方式',
            prop: 'payMode',
            value: '',
            placeholder: '全部',
            type: 'select',
            options: [
                {
                    value: '1',
                    label: '公对公'
                },
                {
                    value: '2',
                    label: '扫码'
                },
                {
                    value: '3',
                    label: '私对公'
                },
                {
                    value: '4',
                    label: '赠送'
                },
            ],
        },
        time: {
            name: '充值时间',
            prop: 'time',
            value: [],
            placeholder: '请选择时间',
            type: 'date',
            dateType: 'daterange',
        }
    }
})
const rechargePageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})

const handleRechargePageChange = () => {
    getclientrecharge()
}
const exportrecharge = () => {
    exportrechargeapi({
        companyName: rechargeFilterData.value.list.companyName.value,
        productType: 0,
        status: rechargeFilterData.value.list.status.value,
    }).then((res: any) => {
        console.log(res)
        window.location.href =
            baseurl + '/common/download?delete=true&fileName=' + res
    })
}
const handleClick = (ele: any) => {
    router.push({path: '/cockpit', query: {id: ele.companyId}})
}

const auditbtn = (val: any) => {
    showBulletAuditDia.value = true
    itemDetail.value = val
}
const handleSearch = () => {
    getclientrecharge()
}
const getclientrecharge = async () => {
    const res: any = await getclientrechargeapi({
        companyName: rechargeFilterData.value.list.companyName.value,
        productType: 0,
        status: rechargeFilterData.value.list.status.value,
        payMode: rechargeFilterData.value.list.payMode.value,
        pageNum: rechargePageInfo.value.pageNum,
        pageSize: rechargePageInfo.value.pageSize,
        queryStartDate: rechargeFilterData.value.list.time.value ? rechargeFilterData.value.list.time.value[0] : '',
        queryEndDate: rechargeFilterData.value.list.time.value ? rechargeFilterData.value.list.time.value[1] : ''
    })
    rechargePageInfo.value.total = res.totalCount
    rechargetableData.value = res.list
}
watch(() => props.type, (newval) => {
    if (newval === 0) {
        getclientrecharge()
    }
}, {
    immediate: true
})
</script>

<style scoped></style>
